import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import CustomImage from '../image/CustomImage'
import { HEIGHT, IS_IOS, NAVIGATIONBAR_HEIGHT, ScaleS, ScaleT, STATUSBAR_HEIGHT, WIDTH } from '../../utils/ScreenUtil'
import CustomButton from '../button/CustomButton'
import { ImageViewer } from 'react-native-image-zoom-viewer'
import { fixImageUrl } from 'src/utils/ConfigUtil'

export default function ImageViewerModal (props) {
  const { images, initIndex, onClose } = props
  const _renderIndicator = function () {
    return null
  }
  const _renderHeader = function (currentIndex) {
    return (
      <View style={styles.imageViewerHeaderView}>
        <View style={styles.imageViewerHeader}>
          <View style={styles.imageViewerLeftView}>
            <CustomButton style={styles.imageViewerLeftImgView} onPress={onClose}>
              <CustomImage style={styles.imageViewerLeftImg} source={require('src/imgC/userinfo/close_black2.png')}/>
            </CustomButton>
          </View>
          <View style={styles.imageViewerCenterView}>
            <Text style={styles.imageViewerCenter}>{(currentIndex + 1) + '/' + images.length}</Text>
          </View>
          <View style={styles.imageViewerRightView}>
            {
              false && (
                <CustomButton
                  style={styles.imageViewerRightTextView}
                  params={currentIndex}
                  onPress={this._deleteCurrentImg}>
                  <Text style={styles.imageViewerRightText}>删除</Text>
                </CustomButton>
              )
            }
          </View>
        </View>
      </View>
    )
  }
  return (
    <ImageViewer
      imageUrls={fixImageUrl(images)}
      enableSwipeDown={false}
      index={initIndex}
      renderHeader={_renderHeader}
      swipeDownThreshold={ScaleS(20)}
      renderIndicator={_renderIndicator}
    />
  )
}

ImageViewerModal.defaultProps = {
  images: [],
  initIndex: 0
}
ImageViewerModal.propTypes = {
  images: PropTypes.array.isRequired,
  initIndex: PropTypes.number,
  onClose: PropTypes.func
}

const styles = StyleSheet.create({
  imageViewerHeaderView: {
    height: NAVIGATIONBAR_HEIGHT,
    backgroundColor: 'white'
  },
  imageViewerHeader: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: ScaleS(44),
    alignItems: 'center',
    flexDirection: 'row'
  },
  imageViewerLeftView: {
    flex: 1,
    alignItems: 'flex-start'
  },
  imageViewerLeftImgView: {
    paddingHorizontal: ScaleS(24),
    height: ScaleS(44),
    alignItems: 'center',
    justifyContent: 'center'
  },
  imageViewerLeftImg: {
    width: ScaleS(15),
    height: ScaleS(15)
  },
  imageViewerCenterView: {
    flex: 1,
    alignItems: 'center'
  },
  imageViewerCenter: {
    color: '#000000',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  imageViewerRightView: {
    flex: 1,
    alignItems: 'flex-end'
  },
  imageViewerRightTextView: {
    paddingHorizontal: ScaleS(24),
    height: ScaleS(44)
  },
  imageViewerRightText: {
    color: '#030303',
    fontSize: ScaleT(17),
    fontWeight: '400',
    lineHeight: ScaleS(44)
  }
})
